<template>
    <div class="SwiperBox">
        <swiper :slidesPerView="1" :spaceBetween="30" :loop="true" :centeredSlides="true" :pagination="{
            clickable: true
        }" :autoplay="{
            delay: 1000,
            disableOnInteraction: false
        }" :navigation="true" :modules="modules" class="mySwiper">
            <swiper-slide v-for="item in imagesList">
                <img :src="item.imageUrl" alt="">
            </swiper-slide>
           
        </swiper>

        <div class="text">
            FACE MODEL MANAGEMENT CHINA
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

// import Swiper core and required modules
import { Navigation, Autoplay, Pagination, Scrollbar, A11y } from 'swiper/modules';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { getHomeAPI } from '@/apis/user';
import { ElMessage } from 'element-plus';

const onSwiper = (swiper) => {
    console.log(swiper);
};
const onSlideChange = () => {
    console.log('slide change');
};

const modules = [Autoplay, Pagination, Navigation, A11y];

const imagesList = ref([])

const getHome = async () => {
    const res = await getHomeAPI();

    if (res.data.code === 200) {
        imagesList.value = res.data.data
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(() => {
    getHome()
}) 

</script>

<style scoped lang="scss">
@media (min-width: 1280px) and (max-width: 1920px) {
    .mySwiper img {
        height: 600px !important;
    }
}

@media (min-width: 750px) and (max-width: 1280px) {
    .mySwiper img {
        height: 450px !important;
    }
}

@media (max-width: 750px) {
    .mySwiper img {
        height: 300px !important;
    }
}

.SwiperBox {
    width: 100vw;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.mySwiper img {
    width: 100%;
    // height: 600px;
    object-fit: cover;
}

//这里使用的:deep样式穿透
:deep(.swiper-pagination) .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: rgb(229, 180, 127);
}

:deep(.swiper-pagination-bullet) {
    width: 14px;
    height: 14px;
    background-color: #fff;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
:deep(.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
    margin: 0 8px;
}

:deep(.swiper-button-prev),
:deep(.swiper-button-next) {
    color: rgb(229, 180, 127);
}

.text {
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 8px;
}
</style>